// 添加公告弹出框
<template>
  <div id="announceDlg">
    <!-- <el-button type="text" @click="configs.dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->
    <el-dialog v-dialogDrag title="发布公告" :visible.sync="configs.dialogFormVisible" :close-on-click-modal="false" :show-close="false">
      <el-form
        :validate-on-rule-change="false"
        :model="configs.announceInfo"
        :rules="currentRule"
        ref="announceInfo"
      >
        <el-form-item label="公告标题" prop="notice_title">
          <el-input v-model="configs.announceInfo.notice_title"></el-input>
        </el-form-item>
        <el-form-item label="公告类型" prop="notice_type">
          <el-input readonly v-model="configs.announceInfo.notice_type"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="notice_content">
          <el-input type="textarea" v-model="configs.announceInfo.notice_content"></el-input>
        </el-form-item>
        <el-form-item label="创建人" prop="create_by" v-if="!configs.isupdate">
          <el-input v-model="configs.announceInfo.create_by"></el-input>
        </el-form-item>
        <!-- <el-form-item label="创建时间" v-if="!configs.isupdate">
          <el-input readonly v-model="configs.announceInfo.create_time"></el-input>
        </el-form-item> -->
        <el-form-item label="修改人" prop="update_by" v-if="configs.isupdate">
          <el-input v-model="configs.announceInfo.update_by"></el-input>
        </el-form-item>
        <!-- <el-form-item label="修改时间" prop="update_time" v-if="configs.isupdate">
          <el-input readonly v-model="configs.announceInfo.update_time"></el-input>
        </el-form-item> -->
        <el-form-item label="查看权限" prop="role" v-if="!configs.isupdate">
          <el-select
            v-model="configs.announceInfo.role"
            multiple
            placeholder="请选择"
            style="width:100%"
            :disabled="configs.fixRole&&true"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >{{item.roleName}}</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="configs.dialogFormVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="resolveflow">发 布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";

export default {
  name: "announceDlg",
  props: {
    configs: {
      type: Object,
      default() {
        return {
          dialogFormVisible: true,
					isupdate: false,
					fixRole:false,
          announceInfo: {
            subject_id: "",
            url: "",
            remark: "",
            notice_type: "",
            role: [],
            create_by: "",
            create_time: "",
            notice_content: "",
            notice_title: "",
            path: "",
            remark: ""
          }
        };
      }
    }
  },
  data() {
    return {
      isRoleListNone: true,
      loading: false,
      options: [],
      currentRule: {
        notice_title: { required: true, trigger: "blur" },
        notice_content: { required: true, trigger: "blur" },
        create_by: { required: true, trigger: "blur" },
        update_by: { required: true, trigger: "blur" },
        role: {
          required: true,
          message: "请至少选择一个查看权限",
          trigger: "change"
        }
      }
    };
  },

  methods: {
    resolveflow() {
      // 预验证
      console.log("我走了");
      console.log(this.$refs);

      this.$refs.announceInfo.validate(res => {
        if (res) {
          this.$confirm("提交操作后不可更改，是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.submitNotice();
            })
            .catch(() => {
              return;
            });
        } else {
          this.$message.warning("请检查必填项");
        }
      });
    },

    submitNotice() {
      console.log(this.configs);

      if (this.configs.isupdate) {
        //获取公告id
        this.configs.announceInfo.update_time = formatDate(
          new Date(),
          "yyyy-MM-dd hh:mm:ss"
        );

        this.$api.announce
          .update(this.configs.announceInfo)
          .then(res => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.loading = false;
              this.configs.dialogFormVisible = false;
              this.$emit("operationSucc", true);
            } else {
              this.$message.error("操作失败!" + res.msg);
            }
          })
          .catch(err => {
            this.config.loading = false;
            this.$message.error("操作失败!" + err);
          });
      } else {
        this.configs.announceInfo.create_time = formatDate(
          new Date(),
          "yyyy-MM-dd hh:mm:ss"
        );

        this.loading = true;
        this.$api.announce
          .add(this.configs.announceInfo)
          .then(res => {
            if (res.code == 200) {
              this.$message.success("发布成功");
              this.loading = false;
              this.configs.dialogFormVisible = false;
              this.$emit("operationSucc", true);
            } else {
              this.$message.error("操作失败!" + res.msg);
            }
          })
          .catch(err => {
            this.loading = false;
            this.$message.error("操作失败!" + err);
          });
      }
    }
  },

  created() {
    this.options = this.$store.state.m_user.roles;
    this.configs.announceInfo.path = this.$route.path;
    if (this.configs.announceInfo.role.length == 0) {
      this.isRoleListNone = true;
    } else {
      this.isRoleListNone = false;
    }
  },
  watch: {
    "configs.isupdate"(newstate, old) {
      if (newstate) {
        this.configs.announceInfo.update_time = formatDate(
          new Date(),
          "yyyy-MM-dd hh:mm:ss"
        );
      } else {
        this.configs.announceInfo.create_time = formatDate(
          new Date(),
          "yyyy-MM-dd hh:mm:ss"
        );
      }
    }
  }
};
</script>

<style lang="less">
</style>
